dojo.require("dijit.TitlePane");

 const CANVAS = {BG:"canvasBg",DRAW:"canvasDraw",ICON:"canvasIcon",TOOL:"canvasTool",SAVE:"canvasSave",DROPBOX:"canvasDropBox"};
 const DIMENSION = {X:<?php echo $editor->x;?>,Y:<?php echo $editor->y;?>,WIDTH:<?php echo $editor->width;?>,HEIGHT:<?php echo $editor->height;?>};
 const TOOL = {ERASER:0,PENCIL:1,BRUSH:2,ICONDRAG:3};

 var mouse={x:0,y:0,m:0,n:0};
 var pen={type:TOOL.PENCIL,color:"#000",width:0};
 var current={canvas:CANVAS.DRAW,mousedown:false,iconmovement:"<?php $editor->loadIconMovement(); ?>"};
 var icons = new Array();
 
<?php $editor->loadDropbox();?>
 
 document.onmousemove = mouseMove;
 document.onmousedown = mouseDown;
 document.onmouseup = mouseUp;

 window.onload = function(){
	var canvases = document.getElementsByTagName('canvas');
	for (i in canvases) {
	   disableSelection(canvases[i]);
	}
	var images = document.getElementsByTagName('img');
	for (i in images) {
	   disableSelection(images[i]);
	}
	
	//##########- ADD ICON HERE (START) -##########//
	//canvasicon.addIcon(id,name,x,y,width,height,src);
	<?php $editor->loadIcon(); ?>
	//##########- ADD ICON HERE  (END)  -##########//
	canvasBg.loadImageAsBackgroud("backgrounds02-sunlit-reeds.jpg");
	canvasdraw.load("<?php $editor->loadDataURL(); ?>");
	document.settings.iconmovement.value=current.iconmovement;
	
	canvasicon.refresh();
	action('drag');
 };
 
 /**
  * action(command) method sets the pen that is being selected.
  */
 function action(command){
	if(command=="eraser"){
	   current.canvas=CANVAS.DRAW;
	   pen.type=TOOL.ERASER;
	   pen.width=5;
	}else if(command=="pencil"){
	   current.canvas=CANVAS.DRAW;
	   pen.type=TOOL.PENCIL;
	   pen.width=1;
	}else if(command=="brush"){
	   current.canvas=CANVAS.DRAW;
	   pen.type=TOOL.BRUSH;
	   pen.width=5;
	}else if(command=="drag"){
	   current.canvas=CANVAS.ICON;
	   pen.type=TOOL.ICONDRAG;
	   pen.width=5;
	}else if(command=="clear"){
	   canvasdraw.clear();
	}else if(command=="save"){
	   save();
	}else if(command=="null"){
	}
 }
 
 /**
  * Changes the color of the pen
  */
 function cColor(color){
	pen.color=color;
 }
 
 /**
  * This method is called everytime a mouse is clicked
  */
 function mouseDown(e){
	mouse.m = mouse.x;
	mouse.n = mouse.y;
	if(isInCanvas())
	   current.mousedown=true;
	current.selectedicon=canvasicon.selectIcon();
	canvasicon.updateOffset();
	compute();
 }
 
 /**
  * Returns true if cursor is within boundary of canvas
  */
 function isInCanvas(){
	if(mouse.x<0) return false;
	if(mouse.y<0) return false;
	if(mouse.x>DIMENSION.WIDTH) return false;
	if(mouse.y>DIMENSION.HEIGHT) return false;
	return true;
 }
 
 /**
  * This method is called everytime a mouse click is released
  */
 function mouseUp(e){
	current.mousedown=false;
 }
 
 /**
  * This method is called everytime the mouse moves.
  */
 function mouseMove(e){
	mouse.m = mouse.x;
	mouse.n = mouse.y;
	mouse.x = e.pageX-DIMENSION.X;
	mouse.y = e.pageY-DIMENSION.Y;
	compute();
 }
 
 /**
  * computes the thing it needs to do based on the action set.
  */
 function compute(){
	canvastool.refresh();
	if(!current.mousedown)return;
	switch(pen.type){
	   case TOOL.PENCIL:
	   case TOOL.BRUSH:
		  canvasdraw.line(mouse.m,mouse.n,mouse.x,mouse.y,pen.width,pen.color);
		  break;
	   case TOOL.ERASER:
		  canvasdraw.erase(mouse.x,mouse.y,pen.width)
		  break;
	   case TOOL.ICONDRAG:
		  canvasicon.moveIcon();
	}
 }
 
//////////////////////


 /**
  * **********************************************************************************
  * Object Literal (canvasdropbox) stores necessary function related to the dropdown menu of each item
  * **********************************************************************************
  */
 var canvasdropbox = {
	clear:function(){
	   var c = document.getElementById(CANVAS.DROPBOX).getContext("2d");
	   c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);

	   canvasdropbox.drawn = -1;
	   canvasdropbox.x = -1;
	   canvasdropbox.y = -1;
	   canvasdropbox.h = -1;
	   canvasdropbox.w = -1;
	   canvasdropbox.i = -1;
	},
	draw:function(i){
	   var c = document.getElementById(CANVAS.DROPBOX).getContext("2d");
	   c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);

	   if(i==-1) return;
	   
	   canvasdropbox.drawn = i;
	   

	   canvasdropbox.x = icons[i].x + icons[i].offsetX;
	   canvasdropbox.y = icons[i].y + icons[i].offsetY;

	   canvasdropbox.w = 200;
	   canvasdropbox.i = 25;

	   //prevents dropbox from appearing offscreen
	   if(canvasdropbox.x + canvasdropbox.w > DIMENSION.WIDTH){
		  var offset = (canvasdropbox.x + canvasdropbox.w) - DIMENSION.WIDTH;
		  canvasdropbox.x -= offset;
	   }
	   if(canvasdropbox.y + (canvasdropbox.i*dropboxes[i].length) > DIMENSION.HEIGHT){
		  var offset = (canvasdropbox.y + (canvasdropbox.i*dropboxes[i].length)) - DIMENSION.HEIGHT;
		  canvasdropbox.y -= offset;
	   }


	   canvasdropbox.h = 0;
	   for(d in dropboxes[i]){
		  canvasdropbox.h += canvasdropbox.drawItem(dropboxes[i][d],canvasdropbox.x,canvasdropbox.y + canvasdropbox.h, canvasdropbox.w, canvasdropbox.i);
	   }
	   
	   c.beginPath();
	   c.strokeStyle = "#000";
	   c.lineWidth   = 2;
	   c.moveTo(canvasdropbox.x + 0, canvasdropbox.y + 0);
	   c.lineTo(canvasdropbox.x + canvasdropbox.w, canvasdropbox.y + 0);
	   c.lineTo(canvasdropbox.x + canvasdropbox.w, canvasdropbox.y + canvasdropbox.h);
	   c.lineTo(canvasdropbox.x + 0, canvasdropbox.y + canvasdropbox.h);
	   c.lineTo(canvasdropbox.x + 0, canvasdropbox.y + 0);
	   c.stroke();

	   c.closePath();
	},
	
	drawItem:function(text,x,y,width,height){
	   var c = document.getElementById(CANVAS.DROPBOX).getContext("2d");
	   c.beginPath();
	   if(mouse.x - x < width && mouse.x > x && mouse.y - y < height && mouse.y > y){
		  c.fillStyle = "#FFF";
	   }else{
		  c.fillStyle = "#777";
	   }
	   c.fillRect(x,y,width,height);               
	   c.fillStyle = "#000";

	   c.fillText(text, x+10, y + 15, width);
	   //c.moveTo(x + 0, y + 0);
	   //c.LineTo(x + 0, y + 0);
	   
	   c.closePath();
	   return height;
	},
	
	select:function(){ //return false if nothing selected.
	   //this function determines if dropbox was clicked.
	   if(canvasdropbox.drawn==-1)return false;
	   if(mouse.x < canvasdropbox.x || mouse.x > canvasdropbox.x + canvasdropbox.w)return false;
	   if(mouse.y < canvasdropbox.y || mouse.y > canvasdropbox.y + canvasdropbox.h)return false;

	   //codes below determine which item was clicked and call the appropriate method.
	   canvasdropbox.action(canvasdropbox.drawn,Math.floor((mouse.y - canvasdropbox.y)/canvasdropbox.i));
	   canvasicon.clearSelection();
	   return true;
	},
	
	action:function(i,j){//i is icon,j is item
	   alert(dropboxlinks[i][j] + " is launched. [" + i + "," + j + "]");
	},
	drawn:-1,
	x:-1,
	y:-1,
	h:-1,
	w:-1,
	i:-1
 };
 
//////////////////

 /**
  * *************************************************************************************
  * Object Literal (canvasdraw) stores necessary function related with the drawing canvas
  * *************************************************************************************
  */
 var canvasdraw = {
	//Draws a line from m,n to x,y
	line:function(m,n,x,y,width,color){
	   var c = document.getElementById(CANVAS.DRAW).getContext("2d");
	   c.beginPath();
	   c.strokeStyle = color;
	   c.lineWidth   = width*2;
	   c.moveTo(m,n);
	   c.lineTo(x,y);
	   c.stroke();
	   c.fillStyle=color;
	   c.arc(m,n,width,0,Math.PI*2,true);
	   c.arc(x,y,width,0,Math.PI*2,true);
	   c.fill();
	   c.closePath();
	},
	//Erase a square around x,y specified by width
	erase:function(x,y,width){
	   var c = document.getElementById(CANVAS.DRAW).getContext("2d");
	   c.beginPath();
	   c.clearRect(x-width,y-width,width*2,width*2);
	   c.fill();
	   c.closePath();
	},
	//Clears entire canvas
	clear:function(){
	   var c = document.getElementById(CANVAS.DRAW).getContext("2d");
	   c.beginPath();
	   c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
	   c.fill();
	   c.closePath();
	},
	//Loads the canvas with an image specified by the dataurl
	load:function(dataurl){
	   var c = document.getElementById(CANVAS.DRAW).getContext("2d");
	   var img = new Image();
	   img.onload = function(){
		  c.width = DIMENSION.WIDTH;
		  c.height = DIMENSION.HEIGHT;
		  c.drawImage(img,0,0);
	   };
	   img.src = dataurl;
	},
	//Extracts the current dataurl representation of the image drawn on canvas
	dataurl:function(){
	   var c=document.getElementById(CANVAS.DRAW);
	   return c.toDataURL("image/png");
	}
 }

 
 /**
  * **********************************************************************************
  * Object Literal (canvasBg)
  * **********************************************************************************
  */
 var canvasBg = {
	//Loads the canvas with an external image
	loadImageAsBackgroud:function(imagePath){
	   var c = document.getElementById(CANVAS.BG).getContext("2d");
	   var img = new Image();
	   img.onload = function(){
		  c.width = DIMENSION.WIDTH;
		  c.height = DIMENSION.HEIGHT;
		  c.drawImage(img,0,0);
	   };
	   img.src = imagePath;
	}
 }
 
 /**
  * **********************************************************************************
  * Object Literal (canvasicon) stores necessary function related with the icon canvas
  * **********************************************************************************
  */
 var canvasicon = {
	//Refresh the current state of icon canvas. i.e:clears and redraws the icon canvas
	refresh:function(){
	   var c = document.getElementById(CANVAS.ICON).getContext("2d");
	   c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
	   canvasdropbox.clear();
	   for (i in icons){
			 canvasicon.drawIcon(icons[i]);
	   }
	},
	
	// draw the context menu for an desktop item
	drawMenu: function(){
		//get the context menu div
		var context_menu = document.getElementById("context_menu");
		context_menu.innerHTML = "";
		context_menu.style.left = mouse.x + 80;
		context_menu.style.top = mouse.y+100;
		if(canvasicon.selected != -1){
			// add items to the context menu
			var names = dropboxes[canvasicon.selected];
			var links = dropboxlinks[canvasicon.selected];
			for(var i=0; i<names.length; i++){
				var menuItem = document.createElement("div");
				menuItem.innerHTML = "<a href='"+links[i]+"'>"+names[i]+"</a>";
				menuItem.setAttribute("class", "context_menu_item");
				context_menu.appendChild(menuItem);
			}
		}else{
			// display the main desktop context menu
			// menu item: create new folder
			var newFolderMenuItem = document.createElement("div");
			newFolderMenuItem.innerHTML = "<a href='javascript:createNewFolderForm()'>Create New Folder</a>";
			newFolderMenuItem.setAttribute("class", "context_menu_item");
			context_menu.appendChild(newFolderMenuItem);
			
			// menu item: Desktop Draw
			var drawMenuItem = document.createElement("div");
			drawMenuItem.innerHTML = "<a href='#'>Desktop Draw</a>";
			drawMenuItem.setAttribute("class", "context_menu_item");
			context_menu.appendChild(drawMenuItem);
		}
		// display the context menu
		context_menu.style.display = "block";
	},
	
	// remove the context menu
	clearMenu: function(){
		var context_menu = document.getElementById("context_menu");
		context_menu.style.display = "none";
	},
		
	
	//Draws the individual icon on the canvas. see the refresh function.
	drawIcon:function(icon){
	   var c = document.getElementById(CANVAS.ICON).getContext("2d");
	   var img = new Image();
	   img.onload = function(){
			c.drawImage(img,icon.x,icon.y,icon.width,icon.height);
		}
	   img.src = icon.src;
	},
	//Adds a new icon into the icons array.
	addIcon:function(id,name,x,y,width,height,src){
	   icon = {id:id,name:name,x:x,y:y,width:width,height:height,src:src};
	   icons.push(icon);
	},
	//Returns the icons' array index that the cursor is hovering over.
	hoverIcon:function(){
	   var list = new Array();
	   for (i in icons){
		  if(mouse.x-icons[i].x<icons[i].width
		  && mouse.x-icons[i].x>0
		  && mouse.y-icons[i].y<icons[i].height
		  && mouse.y-icons[i].y>0){
			 list.push(i);
		  }
	   }
	   var tmp = list.pop();
	   if(tmp>=0){
		  return tmp;
	   }else{
		  return -1;
	   }
	},
	//Sets the selected icon as the one that the cursor is hovering over. See hoverIcon function.
	selectIcon:function(){
	   canvasicon.selected = canvasicon.hoverIcon();
	},
	//Updates the new position of the icons and redraws the icon canvas. See refresh function.
	updateIcon:function(iconIndex){
		if(icons[iconIndex] != null){
		   icons[iconIndex].x=mouse.x-icons[iconIndex].offsetX;
		   icons[iconIndex].y=mouse.y-icons[iconIndex].offsetY;
		   canvasicon.refresh();
		}
	},
	//Moves the icon to new position. See selected function.
	moveIcon:function(){
	   canvasicon.updateIcon(canvasicon.selected);
	},
	//Updates the offset of the cursor and it's selected icon
	updateOffset:function(){
	   try{
		  if(canvasicon.selected>=0){
			 icons[canvasicon.selected].offsetX=mouse.x-icons[canvasicon.selected].x;
			 icons[canvasicon.selected].offsetY=mouse.y-icons[canvasicon.selected].y;
		  }
	   }catch(ex){
	   }
	},
	//Variable to track the currently selected icon.
	selected:-1
	
 };
 
 /**
  * **********************************************************************************
  * Object Literal (canvastool) stores necessary function related with the tool canvas
  * **********************************************************************************
  */
 var canvastool = {
	//refresh the location of the tools.
	refresh:function(){
	   var c = document.getElementById(CANVAS.TOOL).getContext("2d");
	   c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
	   switch(pen.type){
		  case TOOL.PENCIL:
		  case TOOL.BRUSH:
			 c.beginPath();
			 c.fillStyle=pen.color;
			 c.arc(mouse.x,mouse.y,pen.width,0,Math.PI*2,true);
			 c.fill();
			 c.closePath();
			 break;
		  case TOOL.ERASER:
			 c.beginPath();
			 c.fillStyle="#FFF";
			 c.fillRect(mouse.x-pen.width,mouse.y-pen.width,pen.width*2,pen.width*2);
			 c.fill();
			 c.strokeStyle = "#000";
			 c.lineWidth   = 1;
			 c.moveTo(mouse.x-pen.width,mouse.y-pen.width);
			 c.lineTo(mouse.x-pen.width,mouse.y+pen.width);
			 c.lineTo(mouse.x+pen.width,mouse.y+pen.width);
			 c.lineTo(mouse.x+pen.width,mouse.y-pen.width);
			 c.lineTo(mouse.x-pen.width,mouse.y-pen.width);
			 c.stroke();
			 c.closePath();
			 break;
		  case TOOL.ICONDRAG:
			 var w=2;
			 c.beginPath();
			 c.strokeStyle = "#000";
			 c.lineWidth   = w;
			 c.moveTo(mouse.x-pen.width,mouse.y);
			 c.lineTo(mouse.x+pen.width,mouse.y);
			 c.moveTo(mouse.x,mouse.y-pen.width);
			 c.lineTo(mouse.x,mouse.y+pen.width);
			 c.stroke();
			 c.closePath();
			 break;
			 
	   }
	   canvastool.highlightIcon();
	},
	//If in ICON Drag mode, highlights the icon.
	highlightIcon:function(){
	   if(pen.type!=TOOL.ICONDRAG)return;
	   
	   var selected = -1;
	   if(current.mousedown){
		  selected = canvasicon.selected;
	   }else{
		  selected = canvasicon.hoverIcon();
	   }

	   if(selected<0)return;
	   var c = document.getElementById(CANVAS.TOOL).getContext("2d");
	   c.beginPath();
	   c.strokeStyle = "#0FF";
	   c.lineWidth   = 2;
	   c.moveTo(icons[selected].x,icons[selected].y);
	   c.lineTo(icons[selected].x+icons[selected].width,icons[selected].y);
	   c.lineTo(icons[selected].x+icons[selected].width,icons[selected].y+icons[selected].height);
	   c.lineTo(icons[selected].x,icons[selected].y+icons[selected].height);
	   c.lineTo(icons[selected].x,icons[selected].y);
	   c.stroke();

	   c.fillStyle = "#0FF";
	   c.fillRect( icons[selected].x , icons[selected].y + icons[selected].height - 10, icons[selected].width , 10);
	   
	   c.fillStyle = "#000";
	   c.fillText(icons[selected].name, icons[selected].x , icons[selected].y + icons[selected].height - 1 , icons[selected].width );
	   c.closePath();
	   
	}
 };
 
 /**
  * save() function calls a script on the server and sends information to the server to be saved.
  */
 function save(){
	if (window.XMLHttpRequest)// code for IE7+, Firefox, Chrome, Opera, Safari
	   xmlhttp=new XMLHttpRequest();
	else// code for IE6, IE5
	   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

	xmlhttp.onreadystatechange=function(){
								  if (xmlhttp.readyState==4 && xmlhttp.status==200){
									 alert(xmlhttp.responseText);
								  }
							   };
	xmlhttp.open("POST","<?php echo $_SERVER['PHP_SELF'];?>",true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send("image="+encodeURIComponent(canvasdraw.dataurl())+"&icons="+serialize(icons)+"&iconmovement="+encodeURIComponent(current.iconmovement));
 }
 
 function changeIconMovement(element){
	current.iconmovement = element.value;
 }
 
 /**
  * disableSelection prevents canvas element from being highlighted easily.
  */
 function disableSelection(element) {
	if (typeof element.onselectstart != 'undefined') {
	   element.onselectstart = function() { return false; };
	}/* else if (typeof element.style.MozUserSelect != 'undefined') {
	   element.style.MozUserSelect = 'none';
	}*/ else {
	   element.onmousedown = function() { return false; };
	}
 }

 /**
  * Serialise a Javascript Array into PHP Serialised Array.
  * Used when passing the icons array into the php script.
  *
  *  Returns a string representation of variable (which can later be unserialized)  
  *  
  *  version: 1006.1915
  *  discuss at: http://phpjs.org/functions/serialize
  *  +   original by: Arpad Ray (mailto:arpad@php.net)
  *  +   improved by: Dino
  *  +   bugfixed by: Andrej Pavlovic
  *  +   bugfixed by: Garagoth
  *  +      input by: DtTvB (http://dt.in.th/2008-09-16.string-length-in-bytes.html)
  *  +   bugfixed by: Russell Walker (http://www.nbill.co.uk/)
  *  +   bugfixed by: Jamie Beck (http://www.terabit.ca/)
  *  +      input by: Martin (http://www.erlenwiese.de/)
  *  +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  *  -    depends on: utf8_encode
  *  %          note: We feel the main purpose of this function should be to ease the transport of data between php & js
  *  %          note: Aiming for PHP-compatibility, we have to translate objects to arrays
  *  *     example 1: serialize(['Kevin', 'van', 'Zonneveld']);
  *  *     returns 1: 'a:3:{i:0;s:5:"Kevin";i:1;s:3:"van";i:2;s:9:"Zonneveld";}'
  *  *     example 2: serialize({firstName: 'Kevin', midName: 'van', surName: 'Zonneveld'});
  *  *     returns 2: 'a:3:{s:9:"firstName";s:5:"Kevin";s:7:"midName";s:3:"van";s:7:"surName";s:9:"Zonneveld";}'
  */
 function serialize (mixed_value) {
	 var _getType = function (inp) {
		 var type = typeof inp, match;
		 var key;
		 if (type == 'object' && !inp) {
			 return 'null';
		 }
		 if (type == "object") {
			 if (!inp.constructor) {
				 return 'object';
			 }
			 var cons = inp.constructor.toString();
			 match = cons.match(/(\w+)\(/);
			 if (match) {
				 cons = match[1].toLowerCase();
			 }
			 var types = ["boolean", "number", "string", "array"];
			 for (key in types) {
				 if (cons == types[key]) {
					 type = types[key];
					 break;
				 }
			 }
		 }
		 return type;
	 };
	 var type = _getType(mixed_value);
	 var val, ktype = '';
	 
	 switch (type) {
		 case "function": 
			 val = ""; 
			 break;
		 case "boolean":
			 val = "b:" + (mixed_value ? "1" : "0");
			 break;
		 case "number":
			 val = (Math.round(mixed_value) == mixed_value ? "i" : "d") + ":" + mixed_value;
			 break;
		 case "string":
			 mixed_value = this.utf8_encode(mixed_value);
			 val = "s:" + encodeURIComponent(mixed_value).replace(/%../g, 'x').length + ":\"" + mixed_value + "\"";
			 break;
		 case "array":
		 case "object":
			 val = "a";
			 var count = 0;
			 var vals = "";
			 var okey;
			 var key;
			 for (key in mixed_value) {
				 ktype = _getType(mixed_value[key]);
				 if (ktype == "function") { 
					 continue; 
				 }
				 
				 okey = (key.match(/^[0-9]+$/) ? parseInt(key, 10) : key);
				 vals += this.serialize(okey) +
						 this.serialize(mixed_value[key]);
				 count++;
			 }
			 val += ":" + count + ":{" + vals + "}";
			 break;
		 case "undefined": // Fall-through
		 default: // if the JS object has a property which contains a null value, the string cannot be unserialized by PHP
			 val = "N";
			 break;
	 }
	 if (type != "object" && type != "array") {
		 val += ";";
	 }
	 return val;
 }

 /**
  * Needed to be used by the serialize function.
  * 
  *  Encodes an ISO-8859-1 string to UTF-8  
  *  
  *  version: 1006.1915
  *  discuss at: http://phpjs.org/functions/utf8_encode
  *  +   original by: Webtoolkit.info (http://www.webtoolkit.info/)
  *  +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  *  +   improved by: sowberry
  *  +    tweaked by: Jack
  *  +   bugfixed by: Onno Marsman
  *  +   improved by: Yves Sucaet
  *  +   bugfixed by: Onno Marsman
  *  +   bugfixed by: Ulrich
  *  *     example 1: utf8_encode('Kevin van Zonneveld');
  *  *     returns 1: 'Kevin van Zonneveld'
  */
 function utf8_encode ( argString ) {
	 var string = (argString+''); // .replace(/\r\n/g, "\n").replace(/\r/g, "\n");
  
	 var utftext = "";
	 var start, end;
	 var stringl = 0;
  
	 start = end = 0;
	 stringl = string.length;
	 for (var n = 0; n < stringl; n++) {
		 var c1 = string.charCodeAt(n);
		 var enc = null;
  
		 if (c1 < 128) {
			 end++;
		 } else if (c1 > 127 && c1 < 2048) {
			 enc = String.fromCharCode((c1 >> 6) | 192) + String.fromCharCode((c1 & 63) | 128);
		 } else {
			 enc = String.fromCharCode((c1 >> 12) | 224) + String.fromCharCode(((c1 >> 6) & 63) | 128) + String.fromCharCode((c1 & 63) | 128);
		 }
		 if (enc !== null) {
			 if (end > start) {
				 utftext += string.substring(start, end);
			 }
			 utftext += enc;
			 start = end = n+1;
		 }
	 }
  
	 if (end > start) {
		 utftext += string.substring(start, string.length);
	 }
  
	 return utftext;
 }
 
 function dump(text){
	document.status.display.value=text;
 }
 
 // Pop up window when user click on Create New Folder menu item
 function createNewFolderForm(){
	 canvasicon.clearMenu();
	alert('pop me up');
 }